import React, { Suspense } from "react";
import {
  BrowserRouter,
  Link,
  Outlet,
  Route,
  Routes,
  useLocation,
  useNavigate,
  useParams,
  useRoutes,
} from "react-router-dom";
// import List from "./List";

const News = () => {
  const { id } = useParams();
  const { pathname } = useLocation();
  // console.log(id, location);
  return (
    <div>
      News {id}，地址是 {pathname}
    </div>
  );
};
const User = () => {
  const nav = useNavigate();
  return <div onClick={() => nav("/news")}>User</div>;
};
const Menu = () => (
  <div>
    <div>
      <Link to="/">首页</Link> | <Link to="/news">新闻</Link> |
      <Link to="/list">列表</Link> | <Link to="/user">我的</Link>
    </div>
    <Outlet />
  </div>
);

const DynamicList = React.lazy(() => import("./List"));

let routes = [
  {
    path: "/",
    element: <Menu />,
    children: [
      // children首字母大写，导致问题很难排查出来
      { path: "/news", element: <News /> },
      { path: "/user", element: <User /> },
      {
        path: "/list",
        element: (
          <Suspense fallback={<div>loading...</div>}>
            <DynamicList />
          </Suspense>
        ),
      },
    ],
  },
];

const Routering = () => useRoutes(routes);
export default function NewRouter() {
  return (
    <div>
      <BrowserRouter>
        <Routering />
        {/* <Routes>
          <Route path="/" element={<Menu />}>
            <Route path="/news/:id" element={<News />}></Route>
            <Route path="/user" element={<User />}></Route>
          </Route>
        </Routes> */}
      </BrowserRouter>
    </div>
  );
}
